import { useState, useCallback, useEffect } from 'react';
import { useLocalStorage } from './useLocalStorage';
import { LegendConfig } from '../types';
import { message } from 'antd';

/**
 * 默认预设样式 - 与实际ECharts格式完全一致
 */
const DEFAULT_PRESETS: Record<string, LegendConfig> = {
    '标准': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#333333',
            fontSize: 12
        },
        icon: 'rect',
        itemWidth: 25,
        itemHeight: 14,
        itemGap: 10
    },
    '右侧垂直': {
        show: true,
        orient: 'vertical',
        position: {
            left: 'right',
            top: 'center'
        },
        textStyle: {
            color: '#333333',
            fontSize: 12,
            fontWeight: 'normal'
        },
        icon: 'roundRect',
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 15,
        padding: 10,
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        borderRadius: 4,
        borderColor: '#eeeeee',
        borderWidth: 1
    },
    '底部展示': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'bottom'
        },
        textStyle: {
            color: '#666666',
            fontSize: 12,
            fontWeight: 'normal'
        },
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 20,
        padding: [5, 10],
        backgroundColor: 'transparent'
    },
    '商务风格': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#555555',
            fontSize: 13,
            fontWeight: 'bold',
            fontFamily: 'Arial'
        },
        icon: 'roundRect',
        itemWidth: 16,
        itemHeight: 12,
        itemGap: 25,
        padding: [8, 15],
        backgroundColor: '#f5f5f5',
        borderRadius: 4,
        borderColor: '#e0e0e0',
        borderWidth: 1,
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 3,
        shadowOffsetX: 0,
        shadowOffsetY: 1
    },
    '暗色主题': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#cccccc',
            fontSize: 12,
            fontWeight: 'normal'
        },
        icon: 'rect',
        itemWidth: 20,
        itemHeight: 12,
        itemGap: 15,
        padding: 10,
        backgroundColor: 'rgba(50, 50, 50, 0.7)',
        borderRadius: 4,
        inactiveColor: '#666666'
    },
    '带分页': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#333333',
            fontSize: 12
        },
        icon: 'rect',
        itemWidth: 20,
        itemHeight: 14,
        itemGap: 10,
        pageButtonPosition: 'end',
        pageIconColor: '#2f4554',
        pageIconInactiveColor: '#aaa',
        pageIconSize: 15,
        pageTextStyle: {
            color: '#333'
        },
        backgroundColor: '#ffffff',
        borderRadius: 4,
        borderColor: '#e0e0e0',
        borderWidth: 1,
        padding: 10
    },
    '现代简约': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#555555',
            fontSize: 12,
            fontWeight: 'normal',
            fontFamily: 'Arial, sans-serif'
        },
        icon: 'roundRect',
        itemWidth: 18,
        itemHeight: 10,
        itemGap: 20,
        padding: [6, 12],
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderRadius: 30,
        borderWidth: 0,
        shadowColor: 'rgba(0, 0, 0, 0.05)',
        shadowBlur: 5,
        shadowOffsetX: 0,
        shadowOffsetY: 2
    },
    '科技感': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'bottom'
        },
        textStyle: {
            color: '#0e88eb',
            fontSize: 12,
            fontWeight: 'normal',
            fontFamily: 'Consolas, monospace'
        },
        icon: 'rect',
        itemWidth: 15,
        itemHeight: 8,
        itemGap: 15,
        padding: [5, 10],
        backgroundColor: 'rgba(240, 248, 255, 0.8)',
        borderRadius: 2,
        borderColor: '#e8f4ff',
        borderWidth: 1,
        shadowColor: 'rgba(14, 136, 235, 0.1)',
        shadowBlur: 3
    },
    '圆形图标': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#444',
            fontSize: 12
        },
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 15,
        backgroundColor: 'transparent'
    },
    '扁平设计': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#666',
            fontSize: 13,
            fontWeight: 'normal'
        },
        icon: 'rect',
        itemWidth: 22,
        itemHeight: 10,
        itemGap: 25,
        padding: [10, 15],
        backgroundColor: '#f9f9f9',
        borderRadius: 0,
        borderColor: '#eee',
        borderWidth: 1
    },
    '彩色圆点': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#555',
            fontSize: 12,
            fontWeight: 'normal'
        },
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 25,
        backgroundColor: 'transparent',
        inactiveColor: 'rgba(128, 128, 128, 0.3)'
    },
    '左侧垂直带背景': {
        show: true,
        orient: 'vertical',
        position: {
            left: 'left',
            top: 'center'
        },
        textStyle: {
            color: '#333',
            fontSize: 12,
            fontWeight: 'normal'
        },
        icon: 'rect',
        itemWidth: 18,
        itemHeight: 12,
        itemGap: 12,
        padding: 15,
        backgroundColor: 'rgba(250, 250, 250, 0.9)',
        borderRadius: 6,
        borderColor: '#e8e8e8',
        borderWidth: 1,
        shadowColor: 'rgba(0, 0, 0, 0.08)',
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 2
    },
    '极简风格': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#999',
            fontSize: 12,
            fontWeight: 'normal',
            fontFamily: 'Arial'
        },
        icon: 'rect',
        itemWidth: 15,
        itemHeight: 2,
        itemGap: 30,
        backgroundColor: 'transparent'
    },
    '报表风格': {
        show: true,
        orient: 'horizontal',
        position: {
            right: '0',
            top: 'top'
        },
        textStyle: {
            color: '#333',
            fontSize: 11,
            fontWeight: 'normal',
            fontFamily: 'Arial'
        },
        icon: 'rect',
        itemWidth: 12,
        itemHeight: 8,
        itemGap: 10,
        padding: [2, 5],
        backgroundColor: '#f8f8f8',
        borderRadius: 1,
        borderColor: '#ddd',
        borderWidth: 1
    },
    '小尺寸': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#666',
            fontSize: 10,
            fontWeight: 'normal'
        },
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 5,
        itemGap: 8,
        padding: [2, 6],
        backgroundColor: 'transparent'
    },
    '金融数据': {
        show: true,
        orient: 'horizontal',
        position: {
            right: '10',
            top: 'top'
        },
        textStyle: {
            color: '#333',
            fontSize: 11,
            fontWeight: 'bold',
            fontFamily: 'Arial'
        },
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 8,
        itemGap: 12,
        padding: [3, 8],
        backgroundColor: '#f5f7fa',
        borderRadius: 2,
        borderColor: '#e1e5eb',
        borderWidth: 1,
        shadowColor: 'rgba(0, 0, 0, 0.03)',
        shadowBlur: 2,
        shadowOffsetY: 1
    },
    '数据分析': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#2c3e50',
            fontSize: 12,
            fontWeight: 'normal',
            fontFamily: 'Source Sans Pro, sans-serif'
        },
        icon: 'roundRect',
        itemWidth: 18,
        itemHeight: 9,
        itemGap: 20,
        padding: [8, 12],
        backgroundColor: '#ecf0f1',
        borderRadius: 3,
        borderWidth: 0,
        shadowColor: 'rgba(44, 62, 80, 0.1)',
        shadowBlur: 4
    },
    '移动端': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            bottom: '0'
        },
        textStyle: {
            color: '#555',
            fontSize: 10,
            fontWeight: 'normal'
        },
        icon: 'circle',
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 8,
        padding: [3, 5],
        backgroundColor: 'rgba(255, 255, 255, 0.85)',
        borderRadius: 12,
        borderWidth: 0,
        shadowColor: 'rgba(0, 0, 0, 0.08)',
        shadowBlur: 2
    },
    '卡片式': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#303133',
            fontSize: 12,
            fontWeight: 'normal'
        },
        icon: 'roundRect',
        itemWidth: 16,
        itemHeight: 9,
        itemGap: 16,
        padding: [8, 15],
        backgroundColor: '#fff',
        borderRadius: 4,
        borderWidth: 0,
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 6,
        shadowOffsetY: 2
    },
    '医疗数据': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#2c7da0',
            fontSize: 12,
            fontWeight: 'normal',
            fontFamily: 'Roboto, sans-serif'
        },
        icon: 'roundRect',
        itemWidth: 15,
        itemHeight: 9,
        itemGap: 18,
        padding: [6, 12],
        backgroundColor: '#f1faff',
        borderRadius: 4,
        borderColor: '#a9d6e5',
        borderWidth: 1
    },
    '网格布局': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#666',
            fontSize: 12,
            fontWeight: 'normal'
        },
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 10,
        itemGap: 8,
        padding: 10,
        backgroundColor: 'rgba(252, 252, 252, 0.9)',
        borderRadius: 0,
        borderColor: '#eee',
        borderWidth: 1,
        selector: ['all', 'inverse']
    },
    '渐变风格': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#444',
            fontSize: 12,
            fontWeight: 'normal'
        },
        icon: 'roundRect',
        itemWidth: 18,
        itemHeight: 10,
        itemGap: 20,
        padding: [10, 15],
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        borderRadius: 20,
        borderWidth: 0,
        shadowColor: 'rgba(0, 0, 0, 0.05)',
        shadowBlur: 10
    },
    '教育数据': {
        show: true,
        orient: 'horizontal',
        position: {
            left: 'center',
            top: 'top'
        },
        textStyle: {
            color: '#475569',
            fontSize: 12,
            fontWeight: 'normal',
            fontFamily: 'Nunito, sans-serif'
        },
        icon: 'rect',
        itemWidth: 16,
        itemHeight: 10,
        itemGap: 15,
        padding: [5, 10],
        backgroundColor: '#f8fafc',
        borderRadius: 6,
        borderColor: '#e2e8f0',
        borderWidth: 1
    }
};

export interface LegendPreset {
    name: string;
    config: LegendConfig;
    isDefault: boolean;
}

/**
 * 图例预设钩子 - 管理图例样式预设
 */
export function useLegendPresets() {
    // 从本地存储加载用户自定义预设
    const [customPresets, setCustomPresets] = useLocalStorage<Record<string, LegendConfig>>(
        'chart-editor-legend-presets',
        {}
    );

    // 合并默认预设和自定义预设
    const [allPresets, setAllPresets] = useState<LegendPreset[]>([]);

    // 在默认预设和自定义预设变化时更新所有预设
    useEffect(() => {
        const presetArray: LegendPreset[] = [
            ...Object.entries(DEFAULT_PRESETS).map(([name, config]) => ({
                name,
                config,
                isDefault: true
            })),
            ...Object.entries(customPresets).map(([name, config]) => ({
                name,
                config,
                isDefault: false
            }))
        ];

        setAllPresets(presetArray);
    }, [customPresets]);

    // 保存当前配置为新预设
    const saveAsPreset = useCallback((name: string, config: LegendConfig) => {
        if (!name.trim()) {
            message.error('预设名称不能为空');
            return false;
        }

        // 检查是否与默认预设重名
        if (Object.keys(DEFAULT_PRESETS).includes(name)) {
            message.error('不能覆盖默认预设');
            return false;
        }

        setCustomPresets(prev => ({
            ...prev,
            [name]: JSON.parse(JSON.stringify(config)) // 深拷贝确保不受后续修改影响
        }));

        message.success(`预设 "${name}" 已保存`);
        return true;
    }, [setCustomPresets]);

    // 删除自定义预设
    const deletePreset = useCallback((name: string) => {
        // 检查是否为默认预设
        if (Object.keys(DEFAULT_PRESETS).includes(name)) {
            message.error('不能删除默认预设');
            return false;
        }

        setCustomPresets(prev => {
            const newPresets = { ...prev };
            delete newPresets[name];
            return newPresets;
        });

        message.success(`预设 "${name}" 已删除`);
        return true;
    }, [setCustomPresets]);

    return {
        allPresets,
        customPresets,
        saveAsPreset,
        deletePreset
    };
} 